<template>
  <div class="mar5 pad5 bcf round3" :key="updateKey">
    <div>
      <mu-select label="数据目录" v-model="curDir" @change="onDirChange">
        <mu-option :value="item" :label="item" v-for="(item,index) in dirs" :key="index"></mu-option>
      </mu-select>
      <mu-select label="数据模型" v-model="curModelName" @change="onModelNameChange">
        <mu-option :value="item" :label="item" v-for="(item,index) in modelNames" :key="index"></mu-option>
      </mu-select>
      <mu-button color="primary" @click="showAllRows">重置</mu-button>
    </div>

    <div class="bc13 pad5">
      <div v-for="(item,index) in models" :key="index" class="bdbso bdw5 bdc02 pad10 bcf marb10 round5" v-show="item.show">
        <div class="padb10 fwb">{{item.cnName}} / {{item.name}} @ {{item.dir}}</div>
        <div class="flex-r flex-start flex-wrap">
          <div v-for="(f,fIndex) in item.fields"  :key="fIndex" class="flrc w45 mar3 mdui-color-amber-50 pad3">
            <div class="flex1" >{{f.name}}</div>
            <div class="flex1" >{{f.cnName}}</div>
            <div class="flex1">{{f.type}}</div>
            <div class="flex1 tar">
              <mu-button v-if="f.isRelation" @click="show(f.src)" small icon><mu-icon value="send"></mu-icon></mu-button>
              <mu-button  icon small v-clipboard="`'${f.name}','${f.cnName}'`">
                <mu-icon value="content_copy"></mu-icon>
              </mu-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="!showAll" class="mart10" >
      <mu-button full-width @click="showAllRows" color="primary" round>显示全部</mu-button>
    </div>
  </div>
</template>

<script>
import apiEzModel from "@/pages/v1/dev/EzModel/js/apiEzModel";
import {findIndex} from "core-js/internals/array-iteration";

export default {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
      ,models:[]
      ,updateKey:""
      ,showAll:true
      ,dirs:[]
      ,curDir:""
      ,modelNames:[]
      ,curModelName:""
    }
  },
  mounted() {
    this.getAll()
  },
  methods:{
    findIndex,
    getAll(){
      apiEzModel.findBy({page:1,limit:0,_dumps:["fields"]},res=>{
        this.models = res
        this.dirs = []
        for (let modelsKey in this.models) {
          this.models[modelsKey].show = true
          if (this.dirs.indexOf(this.models[modelsKey].dir) === -1){
            this.dirs.push(this.models[modelsKey].dir)
          }
        }
      })
    },
    show(src){
      for (let modelsKey in this.models) {
        this.models[modelsKey].show = src === this.models[modelsKey].name;
      }
      this.showAll = false
      this.updateKey = Math.random()
    },
    showAllRows(){
      for (let modelsKey in this.models) {
        this.models[modelsKey].show = true
      }
      this.showAll = true
      this.curDir = ""
      this.curModelName = ""
      this.updateKey = Math.random()
    },
    onDirChange(){
      if (!this.curDir){
        return
      }
      let choice = []
      for (let modelsKey in this.models) {
        this.models[modelsKey].show = this.curDir === this.models[modelsKey].dir;
      }

      this.showAll = false
      //更新choice
      for (let modelsKey in this.models) {
        if (this.models[modelsKey].dir === this.curDir){
          choice.push(this.models[modelsKey].name)
        }
      }
      this.modelNames = choice
      this.curModelName = ""
    },
    onModelNameChange(){
      if (!this.curModelName){
        return
      }
      for (let modelsKey in this.models) {
        this.models[modelsKey].show = this.curModelName === this.models[modelsKey].name;
      }
      this.showAll = false
      this.updateKey = Math.random()
    }
  }
}
</script>

<style scoped>

</style>